<mat-card class="popup" cdkDrag>
  <div class="queue-header" cdkDragHandle>
    <span class="title">
        Up Next
    </span>
    <button aria-label="Close" mat-icon-button (click)="close()">
      <mat-icon>clear</mat-icon>
    </button>
  </div>
  <div class="tracks-container">
    <cdk-virtual-scroll-viewport *ngIf="playerService.queue.length" itemSize="60">
      <app-song
          *cdkVirtualFor="let songData of playerService.queue; let i = index; templateCacheSize: 0"
          [songData]="songData"
          [queueView]="true"
          (uponPlay)="playSong(i)"
          (uponRemove)="removeSong(i)"
      >
      </app-song>
    </cdk-virtual-scroll-viewport>
    <div class="empty-queue-prompt" *ngIf="!playerService.queue.length">
      Queue is empty
    </div>
  </div>

</mat-card>

